<template>
  <div>
    <div class="playListwrap">
      <div class="middlewrap">
        <play-list-header :cat="cat"></play-list-header>
        <play-list-cube
          v-for="x in showPage"
          :p="x"
          :key="x.id"
        ></play-list-cube>
      </div>
      <div class="my-pager">
        <span class="nextPage" @click="prav">上一页</span>
        <span
          v-for="n in conpanges"
          :key="n"
          :class="n == cur ? 'active' : ''"
          @click="page(n)"
          >{{ n }}</span
        >
        <span class="nextPage" @click="next">下一页</span>
      </div>
    </div>
  </div>
</template>

<script>
import playListCube from "@/components/playListCube.vue";
import NewCard from "@/components/newCard.vue";
import PlayListHeader from "@/components/playListHeader.vue";
// import PlayListCube from "@/components/playListCube.vue";
export default {
  components: { playListCube, PlayListHeader },
  mounted() {
    this.params();
    console.log(this)
    this.getplayList();
    
  },
  data() {
    return {
      conpanges: "", //总页数
      cur: 1, //当前页
      pageSize: 25, //每页展示的数据
      showPage: [], //每页展示的内容
      data: [],
      cat:this.$route.query.cat
    };
  },

  computed: {},
  methods: {
    getplayList() {
      this.axios.get(`/top/playlist?limit=100&cat=${this.$route.query.cat}&order=${this.$route.query.order}`).then((res) => {
        console.log(res);
        this.data = res.data.playlists;
        this.conpanges = Math.ceil(this.data.length / this.pageSize);
        this.page(this.cur);
      });
    },
    page(data) {
      this.cur = data;
      var list = (this.cur - 1) * this.pageSize;
      this.showPage = this.data.slice(list, list + this.pageSize);
      window.scrollTo(0,0)
    },
    prav() {
      if (this.cur != 1) {
        this.cur--;
        this.page(this.cur);
        window.scrollTo(0,0)
      }
    },
    next() {
      if (this.cur < this.conpanges) {
        this.cur++;
        this.page(this.cur);
        window.scrollTo(0,0)
      }
    },
    params(){
     console.log(this.$route.query.cat) 
     console.log(this.$route.query)
    }
  },
};
</script>

<style lang="scss" scoped>
.my-pager {
  width: 960px;
  margin: 0 auto;
  padding: 10px;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  background-image: linear-gradient(rgb(95, 92, 92), rgb(39, 36, 36));
  span {
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #fff;

    &.disabled {
      color: lightgrey;
      border-color: lightgray;
      pointer-events: none;
    }
    &.active {
      color: red;
      background-color: rgb(0, 0, 0);
      border-block: rgb(0, 4, 4);
    }
  }
}
.playListwrap {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.middlewrap {
  width: 980px;
  overflow: hidden;
  margin: 0 auto;
  /* min-height: 1500px; */
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  background-color: #fff;
}
</style>
